<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>产品祥情细页 - 我爱模板网 www.5imoban.net</title>
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="css/base.css" type="text/css" rel="stylesheet" />
<link href="css/main.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/TouchSlide.1.1.js"></script>
<script type="text/javascript">
function validate(){
	if (form.name.value == "") {
        alert("名称不能为空");
        return false;
    }
	if (form.description.value == "") {
        alert("描述不能为空");
        return false;
    }
	if (form.file.value == "") {
        alert("请选择要上传的文件");
        return false;
    }
	if (form.price.value == "") {
        alert("请输入价格");
        return false;
    }
	if (form.quantity.value == "") {
        alert("请输入数量");
        return false;
    }
}
</script>
</head>
<body>
<!--nav-->
<nav id="nav-page" class="clearfix">
	<section class="container">
        <a href="#" class="fl current">HOME</a>
        <a href="#" class="fl hidden-xs">关于KORRALAA</a>
        <a href="#" class="fl hidden-xs">PRODUCT</a>
        <a href="#" class="fl hidden-xs">KO资讯</a>
        <a href="javascript:;" class="fr button" data-num="0">CONTACT US<i class="glyphicon glyphicon-align-justify"></i></a>
        <ul class="nav-list">
            <li><a href="#">关于KORRALAA</a></li>
            <li><a href="#">PRODUCT</a></li>
            <li><a href="#">KO资讯</a></li>
        </ul>
    </section>
</nav>
<!--/nav-->
<!--details-pc-->
<section id="details-pc" class="hidden-xs clearfix container mt15">
	<section class="fl bigImg">
    	<img src="images/img19.png" style="display:block" class="img-responsive aligncenter">
    	<img src="images/img21.png" class="img-responsive aligncenter">
    	<img src="images/img19.png" class="img-responsive aligncenter">
    	<img src="images/img21.png" class="img-responsive aligncenter">
    	<img src="images/img19.png" class="img-responsive aligncenter">
    	<img src="images/img21.png" class="img-responsive aligncenter">
    	<img src="images/img19.png" class="img-responsive aligncenter">
    	<img src="images/img21.png" class="img-responsive aligncenter">
    </section>
    <ul class="fl imgList">
    	<li class="up"></li>
        <div>
        	<section>
                <li><img src="images/img20.png" class="img-responsive aligncenter"></li>
                <li><img src="images/img22.png" class="img-responsive aligncenter"></li>
                <li><img src="images/img20.png" class="img-responsive aligncenter"></li>
                <li><img src="images/img22.png" class="img-responsive aligncenter"></li>
                <li><img src="images/img20.png" class="img-responsive aligncenter"></li>
                <li><img src="images/img22.png" class="img-responsive aligncenter"></li>
                <li><img src="images/img20.png" class="img-responsive aligncenter"></li>
                <li><img src="images/img22.png" class="img-responsive aligncenter"></li>
            </section>
        </div>
    	<li class="down"></li>
    </ul>
    <form action="add" method="post" onsubmit="return validate()" enctype="multipart/form-data" name="form">
    <br>
    名称：<input type="text" name="name"><br><br>
    描述：<input type="text" name="description"><br><br>
    图片：<input type="file" name="file" style="width:157px;display:inline;"><br><br>
    价格：<input type="text" name="price" onKeyUp="value=value.replace(/[^(\d+)(\.\d+)?$]{1}/g,'')"><br><br>
    数量：<input type="text" name="quantity" onKeyUp="value=value.replace(/[^(\d+)$]{1}/g,'')"><br><br>
    <input type="submit" value="添加">
    </form>
</section>
<!--/details-pc-->
<!--details-phone-->
<section id="details-phone">
	<div id="goods-scroll">
        <div class="banner-bd">
            <ul>
                <li><a href="#"><img src="images/img19.png" /></a></li>
                <li><a href="#"><img src="images/img21.png"/></a></li>
            </ul>
        </div>
        <div class="banner-hd">
            <ul></ul>
        </div>
    </div>
</section>
<!--/details-phone-->
<!--baobei-->
<section id="baobei" class="container mt40">
	<h3>商品介绍</h3>
    <section class="baobei-img">
    	<img src="images/baobei.png" class="img-responsive aligncenter">
    </section>
</section>
<!--/baobei-->
<!--xiuchang-->
<section id="xiuchang" class="container mt40">
	<h3>秀场</h3>
    <div id="picScroll" class="picScroll">
        <div class="hd">
            <span class="next"></span>
            <ul></ul>
            <span class="prev"></span>
        </div>
        <div class="bd">
            <ul>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
            </ul>
            <ul>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
            </ul>
            <ul>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
                <li><a href="#"><img _src="images/img23.png" src="images/blank.png" /></a></li>
            </ul>
        </div>
    </div>
</section>
<section class="clearfix mt20 mb50 container">
    <img src="images/img24.png" class="img-responsive fr">
</section>
<!--/xiuchang-->
<!--footer-->
<footer class="clearfix">
	<section class="container">
        <p>Copyright  2006-2015 KORRALAA  HONGKONG COLA TRADING CO.,LIMITED  All Rights Reserved.</p>
        <p class="mr">
            <a href="http://www.5imoban.net/" target="_blank" style="color:#ccc;">我爱模板网</a><br>
            Freephone: +86 400 800 8000<br>
            HONGKONG COLA TRADING CO.,LIMITED <br>
            Freephone: +86 400 800 8000
        </p>
        <dl>
            <dt>关于蔻拉</dt>
            <dd><a href="#">蔻拉文化</a></dd>
            <dd><a href="#">品牌故事</a></dd>
        </dl>
        <dl>
            <dt>联系我们</dt>
            <dd><a href="#">蔻拉客服</a></dd>
            <dd><a href="#">帮助反馈</a></dd>
            <dd><a href="#">微信公众号</a></dd>
        </dl>
        <dl>
            <dt>产品中心</dt>
            <dd><a href="#">女包系列</a></dd>
        </dl>
    </section>
</footer>
<!--/footer-->
<script>
$(function(){

	$("nav .button").click(function(){
		var num = $(this).data("num");
		if(num == 0){
			$("nav .nav-list").slideDown();
			$(this).data("num",1);
		}else{
			$("nav .nav-list").slideUp();
			$(this).data("num",0);
		}
	})
	
	$(".imgList li").click(function(){
		var i = $(this).index();
		$(".bigImg img").eq(i).show().siblings().hide();
	})
	
	TouchSlide({ 
		slideCell:"#goods-scroll",
		titCell:".banner-hd ul",
		mainCell:".banner-bd ul", 
		effect:"leftLoop", 
		autoPage:true,//自动分页
		autoPlay:true //自动播放
	});
	
	TouchSlide({ 
		slideCell:"#picScroll",
		titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
		autoPage:true, //自动分页
		pnLoop:"false", // 前后按钮不循环
		switchLoad:"_src" //切换加载，真实图片路径为"_src" 
	});
	
	//滚动
	var step = $(".imgList section li").outerHeight()+5;
	var i=0;
	var maxLength = $(".imgList section li").length;
	console.log(maxLength);
	$(".imgList .up").click(function(){
		if(i<=(maxLength - 5)){
			i++;
			$(".imgList section").css("top","-="+step+"px");
		}
	})
	$(".imgList .down").click(function(){
		if(i>=1){
			i--;
			$(".imgList section").css("top","+="+step+"px");
		}
	})

})
</script>
</body>
</html>